All Projects

|

MERN Hotel

🗓️ 2024

M
E
R
N
-
H
o
t
e
l

A full-stack hotel booking web application built using ReactJS for the frontend and ExpressJS for the backend. The app enables users to browse, book, and pay for hotels securely, offering a seamless booking experience.

Tech Stack:

Vite

Node.js

Express.js

Stripe

Tailwind CSS

Axios

JWT

MongoDB

Mongoose

Zod

Lenis

Lucide React

Typescript

Javascript

React.js

Email.js

Vercel

Render

Features and Functionality

Hotel Listing & Search

Users can browse through a list of available hotels with filters for location, price, availability, and ratings.

Hotel Details Page

Each hotel has a dedicated page showing images, amenities, pricing, availability calendar, and reviews.

User Authentication

Secure login and registration system using JWT for token-based authentication and session management.

Booking System

Users can select dates, number of guests, and book rooms directly through the interface. Availability is checked in real-time.

Stripe Payment Integration

Secure payment processing via Stripe API, allowing users to pay with credit/debit cards at checkout.

Admin Dashboard

Admins can manage listings, view bookings, update availability, and monitor transactions.

Responsive UI

Tailwind CSS ensures a mobile-first and fully responsive design across all device sizes.

Email Notifications

Booking confirmations and cancellation emails are sent via Email.js to both users and admins.

Smooth Scrolling & UX Enhancements

Lenis adds smooth scrolling for better user experience, while Lucide React provides clean icons across the UI.

Form Validation

Zod is used to validate booking forms and user inputs on both frontend and backend for data integrity.

Deployment

Frontend deployed on Vercel, backend hosted on Render with environment separation and CI/CD setup.

Challenges and Solutions

Handling Real-Time Availability & Overlapping Bookings

Implemented date range conflict checks using Mongoose queries and server-side validation to prevent double bookings.

Securing Payment Transactions

Integrated Stripe with secure checkout sessions, webhooks for payment confirmation, and ensured HTTPS enforcement on both ends.

Maintaining User Session Across Routes

Used JWT tokens stored in HTTP-only cookies and verified on each protected route request for persistent, secure authentication.

Form Validation Consistency

Zod schemas shared between frontend and backend ensured consistent validation and reduced duplication of logic.

Responsive UI on All Devices

Used Tailwind CSS utility classes with breakpoints and mobile-first design principles for adaptive layouts.

Email Deliverability and Spam Filtering

Configured Email.js with fallback error handling and added reply-to headers and SPF/DKIM settings to improve deliverability.

Scaling Backend for Traffic Spikes

Deployed backend on Render with autoscaling enabled, and optimized database queries using Mongoose indexing.

Portfolio2.0 Portfolio1.0